<html><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo - DraggableDelegate 使用示例</title><script src="../../../../../../g.alicdn.com/kissy/k/1.4.7/seed.js" tppabs="http://g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
<link href="../../../../../../g.alicdn.com/kissy/k/1.4.7/css/dpl/base.css" tppabs="http://g.alicdn.com/kissy/k/1.4.7/css/dpl/base.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/box.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/dd/assets/box.css" />
<link rel="stylesheet" href="assets/demo3.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/dd/assets/demo3.css" />
</head>
<body>
<button id="add_delegate">add delegate drag</button>
<div id="container3" class="container">
    <div class="box component">
        <s class="box-tp"><b></b></s>
        <div class="box-hd cheader">
            <h3>拖动头</h3>
        </div>
        <div class="box-bd">
            delegate drag 1
        </div>
        <s class="box-bt"><b></b></s>
    </div>
    <div class="box" >
        <s class="box-tp"><b></b></s>
        <div id="drop" class="box-bd ks-dd">
            drop zone
        </div>
        <s class="box-bt"><b></b></s>
    </div>
</div>

<script>
KISSY.use("node,dd", function (S, Node, DD) {
    var DDM = DD.DDM,
        DraggableDelegate = DD.DraggableDelegate,
        Droppable = DD.Droppable;


    var p;
    /**
     * 集中监听所有
     */
    DDM.on("dragstart", function(ev) {

        var c = ev.drag;
        p = c.get("dragNode").css("position");
    });

    DDM.on("dragend", function(ev) {
        var c = ev.drag;
        // 恢复原有定位
        c.get("dragNode").css("position", p);
    });


    S.one("#container3").unselectable();

    var delegate = new DraggableDelegate({
        container:"#container3",
        handlers:['.cheader'],
        selector:'.component',
        move:true
    });

    var drop = new Droppable({
        node:"#drop"
    });

    var c = 1;

    S.one("#add_delegate").on("click", function() {
        new Node('<div class="box component"><s class="box-tp"><b></b></s><div class="box-hd cheader">'
                + '<h3>拖动头</h3></div><div class="box-bd">delegate drag '+(++c)
                + '</div><s class="box-bt"><b></b></s></div>')
                .prependTo("#container3").unselectable();
    });



    function onhit(ev) {
        ev.drag.get("dragNode").css("margin", "5px 10px");
        ev.drag.get("dragNode").appendTo(ev.drop.get("node"));
    }

    drop.on("drophit",onhit);

});
</script>


</body>
</html>